<template>
  <div>
    <div class="filter-line flx-row-s-c">
      <span class="item-name">域名</span>
      <Input
          v-model.trim="name"
          placeholder="请输入"
          maxlength="30"
          style="width: 150px"
      />
      <span class="item-name">过户状态</span>
      <Select v-model="status" style="width: 150px;">
        <Option
          v-for="(item, index) in statusList"
          :value="item.value"
          :key="'s' + index"
          >{{ item.label }}</Option
        >
      </Select>

      <div
        class="user-strong-button line-button-size"
        style="margin: 0 10px 0 30px"
        @click="pageChange(1)"
      >
        搜索
      </div>
      <div class="user-normal-button line-button-size" @click="reset">重置</div>
    </div>
    <div class="listTable-area pub-m-t-15">
      <div style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="filter-line search-result-line flx-row-bw-c">
          <span class="f-14 c-g"
            >搜索结果共<span class="c-black">{{
              total != null ? ` ${total} ` : ""
            }}</span
            >条</span
          >
        </div>
        <div class="my-domain-table">
          <Table
            :loading="loading"
            ref="pushDomianTable"
            :columns="columns"
            :data="list"
            :disabled-hover="true"
          ></Table>
          <div class="form-page-bottom-area flx-row-c-c">
            <Page
              :total="total"
              :current="page"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-elevator
              show-sizer
              show-total
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTransferList } from "@/api/user";
export default {
  name: "VipTransferList",
  data() {
    return {
      loading: false,
      statusList: [
        {
          value: -1,
          label: "全部",
        },
        {
          value: 0,
          label: "未处理",
        },
        {
          value: 1,
          label: "处理中",
        },
        {
          value: 2,
          label: "成功",
        },
        {
          value: 3,
          label: "失败",
        },
      ],
      columns: [
        {
          width: 80,
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          miWidth: 120,
          title: "域名",
          key: "domainName",
          align: "left",
        },
        {
          title: "模板名称",
          key: "templateName",
          align: "left",
        },
        {
          title: "原模板",
          key: "username",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              params.row.oldTemplateName ? params.row.oldTemplateName : "-"
            );
          },
        },
        {
          title: "创建时间",
          key: "createdTime",
          align: "left",
        },
        {
          title: "过户状态",
          key: "userLevelName",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              params.row.status == 0
                ? "未处理"
                : params.row.status == 1
                ? "处理中"
                : params.row.status == 2
                ? "成功"
                : "失败"
            );
          },
        },
        {
          title: "备注",
          key: "action",
          align: "left",
          render: (h, params) => {
            return h("span", params.row.remark ? params.row.remark : "-");
          },
        },
        {
          title: "完成时间",
          key: "createdTime",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              params.row.finishTime ? params.row.finishTime : "-"
            );
          },
        },
      ],
      // 表单数据
      status: -1,
      name: "",
      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
    };
  },
  created() {
    this.getTransferList();
  },
  methods: {
    // 获取列表
    async getTransferList() {
      this.loading = true;
      let data = {
        limit: this.pageSize,
        page: this.page,
      };
      if (this.status != -1) {
        data.status = this.status;
      }
      if (this.name != null && this.name != "") {
        data.domainName = this.name;
      }
      let res = await getTransferList(data);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 重置
    reset() {
      this.status = -1;
      this.name = "";
      this.page = 1;
      this.getTransferList();
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getTransferList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-domain-table /deep/ {
  width: 100%;
  .form-page-bottom-area {
    border: none;
  }
  .ivu-table-wrapper {
    .ivu-table-cell {
      color: #000;
      &:nth-child(1) {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .ivu-table-header {
      box-sizing: border-box;
    }
    .ivu-table-row {
      box-sizing: border-box;
      &:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        transform: scale(1.01);
      }
    }
  }
  .tab-btn:hover {
    color: $mainColor;
    border-color: $mainColor;
  }
  .tab-btn:focus {
    box-shadow: none;
  }
  .table-domainName {
    color: $mainColor;
  }
}
.listTable-area {
  padding: 30px;
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  border-top: 20px solid #f3f6fb;
  box-sizing: border-box;
}
</style>
